<template>
	<view @click="add()">
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
			v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text >{{money}}</text>
					<text class="u-font-20 u-padding-left-10"></text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	import * as api from '@/api/api.js'
	export default {
		props: {
			show: '',
			id:'',
			money: '',
			type: ''
		},
		data() {
			return {
				show1: true,
				password: '',
				dayID: ''
			}
		},
		onLoad() {
			console.log('执行');
		},
		methods: {
			add(id) {
				console.log(222);
				// this.showstate1()
				// this.show = false;
				this.$emit('showstate')
			},
			//支付密码是否正确
			onChange(val) {
				console.log(val)
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					if (this.type == 'lock') {
						this.pay1();
					} else {
						this.pay();
					}
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			async pay() {
				console.log(JSON.stringify(this.id))
				api.request({
					url: '/p/vip',
					method: 'POST',
					data: {
						'packageId':'2'
					}
				}).then(res => {
					// console.log(this.id)
					this.viplist = res.data
					console.log(res);
					this.add()
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					this.$emit('tiaoz')
				})
			},
			pay1() {
				console.log(this.id)
				api.request({
					url: '/p/unlock/'+this.id,
					method: 'POST',
				}).then(res => {
					api.request({
						url: '/p/unlock',
						method: 'GET',
					}).then(set => {
						console.log(set,178551)
					})
					this.viplist = res.data
					console.log(res);
					this.add(this.id)
					uni.showToast({
						title: '解锁成功',
						icon: 'none'
					})
				})
			},
			showPop(flag = true) {
				this.password = '';
				this.$emit('showstate')
			},
			finish() {
				console.log(11111)
			}
		}
	}
</script>

<style lang="scss">
	.money {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}
</style>
